import React, { Component } from 'react';
import ListCss from './index.module.css';
import PubSub from 'pubsub-js';
// react脚手架中src引入图片不能放置字符串，而是需要import引入
import LoadingPic from '../default.gif';

export default class List extends Component {
  // 需要让List和Search进行兄弟组件的数据交互，不借助公共父组件app，而是使用事件广播（发布订阅）
  state = {
    users: [],
    isFirstOpen: true,
    isLoading: false,
    errMessage: ''
  }
  // 在DOM挂载完成后做发布订阅的建立，坐在List中是因为List中的数据处理较多。
  // 可以将订阅事件的人看作是父组件，订阅相当于给子组件传递一个emit函数，子组件在合适的时候触发它
  componentDidMount() {
    // PubSub订阅事件，事件名为updateUsers，并指定了事件回调
    this.token = PubSub.subscribe('updateUsers', (_, data) => {
      this.setState(data);
    })
  }
  // 组件卸载时，删除发布订阅中心
  componentWillUnmount() {
    PubSub.unsubscribe(this.token);
  };
  render() {
    const { users, isFirstOpen, isLoading, errMessage } = this.state;
    return (
      <div className={ListCss.container}>
        {
          errMessage ? <p>出错了,错误原因是{errMessage}</p> :
            isFirstOpen ? <p>欢迎使用搜索系统</p> :
              isLoading ? <p>loading....</p> :
                users.map(user => {
                  return (
                    <div className={ListCss.card} key={user.id}>
                      <a href={user.html_url} target='_blank' rel="noreferrer">
                        <img src={user.avatar_url} onError={(ev) => { ev.target.src = LoadingPic }} alt="图片出错了" />
                      </a>
                      <p>{user.login}</p>
                    </div>
                  )
                })
        }
      </div >
    )
  }
}
